<script setup lang="ts">
  import { formatDistanceToNowStrict } from "date-fns";
  import zh from "date-fns/locale/zh-CN";
  import type { Mail } from "@/data/mails.ts";
  import { ScrollArea } from "@/components/ui/scroll-area";
  import { cn } from "@/lib/utils.ts";
  import { Badge } from "@/components/ui/badge";

  interface MailListProps {
    items: Mail[];
  }

  defineProps<MailListProps>();
  const selectedMail = defineModel("selectedMail", { required: false });

  function getBadgeVariantFromLabel(label: string) {
    if (["work"].includes(label.toLowerCase())) return "default";

    if (["personal"].includes(label.toLowerCase())) return "outline";

    return "secondary";
  }
</script>

<template>
  <ScrollArea class="flex h-screen">
    <div class="flex flex-1 flex-col gap-2 p-4 pt-0">
      <TransitionGroup name="list" appear>
        <div
          v-for="item of items"
          :key="item.id"
          :class="
            cn(
              'flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent',
              selectedMail === item.id && 'bg-muted'
            )
          "
          @click="selectedMail = item.id"
        >
          <div class="flex w-full flex-col gap-1">
            <div class="flex items-center">
              <div class="flex items-center gap-2">
                <div class="font-semibold">
                  {{ item.name }}
                </div>
                <span v-if="!item.read" class="flex h-2 w-2 rounded-full bg-amber-300" />
              </div>
              <div
                :class="
                  cn(
                    'ml-auto text-xs',
                    selectedMail === item.id ? 'text-foreground' : 'text-muted-foreground'
                  )
                "
              >
                {{ formatDistanceToNowStrict(new Date(item.date), { addSuffix: true, locale: zh }) }}
              </div>
            </div>

            <div class="text-xs font-medium">
              {{ item.subject }}
            </div>
          </div>
          <div class="line-clamp-2 text-xs text-muted-foreground">
            {{ item.text.substring(0, 300) }}
          </div>
          <div class="flex items-center gap-2">
            <Badge
              v-for="label of item.labels"
              :key="label"
              :variant="getBadgeVariantFromLabel(label)"
            >
              {{ label }}
            </Badge>
          </div>
        </div>
      </TransitionGroup>
    </div>
  </ScrollArea>
</template>

<style scoped>
  .list-move,
  .list-enter-active,
  .list-leave-active {
    transition: all 0.5s ease;
  }

  .list-enter-from,
  .list-leave-to {
    opacity: 0;
    transform: translateY(15px);
  }

  .list-leave-active {
    position: absolute;
  }
</style>
